@extends("admin.layout.main")

@section("content")
    <style>
        .error{
            color: red;
        }
        #container {width:70%; height: 400px; }
        #pickerBox {
            width: 500px;
        }

        #poiInfo {
            background: #fff;
        }
        #selectCity a{
            margin-right: 5px;
        }
        .info-title{width:120px;font-size:18px;font-weight: bold;text-align: center !important;}
        .info-title-active{background: #cccccc}
        .ads-list li{list-style: none;float: left;margin:5px;border:1px solid #cccccc}
    </style>

    <!--富文本编辑器-->
    <link href="/plugins/kindeditor/themes/default/default.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/plugins/kindeditor/plugins/code/prettify.css" media="screen" rel="stylesheet" type="text/css">

    <script src="/plugins/kindeditor/kindeditor-all.js"  type="text/javascript"></script>
    <script src="/plugins/kindeditor/lang/zh-CN.js"  type="text/javascript"></script>
    <script src="/plugins/kindeditor/plugins/code/prettify.js"  type="text/javascript"></script>

    <!--主页面头部信息-->
    <div class="page-header">
        <h1>
            商品详情
        </h1>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form  class="form-horizontal" method="post" id="form" action="{{ route('admin.goods.ajaxSave') }}">
                <div class="form-group" style="border-bottom: 1px dashed #cccccc;">
                    <label class="col-sm-1 control-label info-title info-title-active" data-info="normal" onclick="changeInfo(this)">通用信息</label>
                    <label class="col-sm-1 control-label info-title" data-info="gallery" onclick="changeInfo(this)">商品相册</label>
                </div>
                <div id="normal" class="info-content">
                    <div class="form-group">
                        <label class="col-sm-12 control-label " style="font-size:16px;font-weight: bold;text-align: left">通用信息</label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 商品名称: </label>
                        <div class="col-sm-9">
                            <input placeholder="" name="name" required type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 商品描述: </label>
                        <div class="col-sm-9">
                            <textarea style="resize: none;width: 400px;height: 100px;" name="decription" id="descript" maxlength="140" required></textarea>
                            <span id="desplength">0</span>/140
                            <br>
                            商品描述最长不能超过140个汉字
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 商品价格: </label>
                        <div class="col-sm-9" style="margin-top: 10px">
                            <input type="text" name="member_price" required max="999999999.99" min="0">
                            元
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 成本价: </label>
                        <div class="col-sm-9">
                            <input placeholder="" name="cost_price" required type="text" max="999999999.99">
                            元
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 总库存: </label>
                        <div class="col-sm-9">
                            <input placeholder="" name="stock" required type="text" max="99999999999">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right"> 商品关键词: </label>
                        <div class="col-sm-9">
                            <input placeholder="" name="key_word" required type="text">
                            <br>
                            多个关键词，用逗号隔开
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 商品详情: </label>
                        <div class="col-sm-9">
                            <textarea style="width:634px;height:500px;visibility:hidden;" name="content" id="content" aria-required="true"></textarea>
                        </div>
                    </div>
                </div>
                <div id="gallery" style="display: none" class="info-content">
                    <div class="form-group">
                        <label class="col-sm-12 control-label " style="font-size:16px;font-weight: bold;text-align: left">商品相册</label>
                    </div>
                    <div class="form-group">
                        <ul class="ads-list">
                            <li style="height: 261px;">
                                <div style="margin: 5px">
                                    <div id="res_img_0" class="outdiv">
                                        <img src="/plugins/uploadfiles/img/timg.png" width="240" height="180">
                                    </div>
                                    <div style="margin-top: 5px;height: 40px;line-height: 40px">
                                        排序：<input type="text" name="order[]" style="width: 50px;height: 30px">
                                        <a style="margin:5px;" onclick="remove(this)"><i class="ace-icon glyphicon glyphicon-remove"></i></a>
                                        <span style="float: right"><button type="button" class="btn btn-xs btn-success" id="upload_0" >上传</button></span>
                                    </div>
                                </div>
                            </li>
                            <li style="height: 261px;">
                                <div style="margin: 5px">
                                    <div id="res_img_1" class="outdiv">
                                        <img src="/plugins/uploadfiles/img/timg.png" width="240" height="180">
                                    </div>
                                    <div style="margin-top: 5px;height: 40px;line-height: 40px">
                                        排序：<input type="text" name="order[]" style="width: 50px;height: 30px">
                                        <a style="margin:5px;" onclick="remove(this)"><i class="ace-icon glyphicon glyphicon-remove"></i></a>
                                        <span style="float: right"><button type="button" class="btn btn-xs btn-success" id="upload_1" >上传</button></span>
                                    </div>
                                </div>
                            </li>
                            <li style="height: 261px;">
                                <div style="margin: 5px">
                                    <div id="res_img_2" class="outdiv">
                                        <img src="/plugins/uploadfiles/img/timg.png" width="240" height="180">
                                    </div>
                                    <div style="margin-top: 5px;height: 40px;line-height: 40px">
                                        排序：<input type="text" name="order[]" style="width: 50px;height: 30px">
                                        <a style="margin:5px;" onclick="remove(this)"><i class="ace-icon glyphicon glyphicon-remove"></i></a>
                                        <span style="float: right"><button type="button" class="btn btn-xs btn-success" id="upload_2" >上传</button></span>
                                    </div>
                                </div>
                            </li>
                            <li style="height: 261px;">
                                <div style="margin: 5px">
                                    <div id="res_img_3" class="outdiv">
                                        <img src="/plugins/uploadfiles/img/timg.png" width="240" height="180">
                                    </div>
                                    <div style="margin-top: 5px;height: 40px;line-height: 40px">
                                        排序：<input type="text" name="order[]" style="width: 50px;height: 30px">
                                        <a style="margin:5px;" onclick="remove(this)"><i class="ace-icon glyphicon glyphicon-remove"></i></a>
                                        <span style="float: right"><button type="button" class="btn btn-xs btn-success" id="upload_3" >上传</button></span>
                                    </div>
                                </div>
                            </li>
                            <li style="height: 261px;">
                                <div style="margin: 5px">
                                    <div id="res_img_4" class="outdiv">
                                        <img src="/plugins/uploadfiles/img/timg.png" width="240" height="180">
                                    </div>
                                    <div style="margin-top: 5px;height: 40px;line-height: 40px">
                                        排序：<input type="text" name="order[]" style="width: 50px;height: 30px">
                                        <a style="margin:5px;" onclick="remove(this)"><i class="ace-icon glyphicon glyphicon-remove"></i></a>
                                        <span style="float: right"><button type="button" class="btn btn-xs btn-success" id="upload_4" >上传</button></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-offset-2 col-md-9">
                    <button class="btn btn-info btn-primary">
                        保存
                    </button>
                    <a class="btn" onclick="javascript:history.back(-1);">
                        返回
                    </a>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        function changeInfo(obj) {
            $(obj).addClass('info-title-active').siblings('label').removeClass('info-title-active');
            var info = $(obj).data('info');
            $('.info-content').hide();
            $('#'+info).show();
        }
        $('#descript').keyup(function(){
            var curLength=$(this).val().length;
            $('#desplength').html(curLength);
        });
        KindEditor.ready(function(K) {
            var editor1 = K.create('#content', {
                urlType : 'domain',
                afterBlur: function(){
                    this.sync();
                },
                afterChange : function() {
                    $('.word_count1').html(this.count()); //字数统计包含HTML代码
                    $('.word_count2').html(this.count('text'));  //字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字
                    //////////
                    //限制字数
                    var limitNum = 700;  //设定限制字数
                    var pattern = '还可以输入' + limitNum + '字';
                    $('#content_length').html(pattern); //输入显示
                    // if(this.count('text') > limitNum) {
                    //     pattern = ('<span style="color:red">字数超过限制</span>');
                    //     //超过字数限制自动截取
                    //     var strValue = editor1.text();
                    //     strValue = strValue.substring(0,limitNum);
                    //     editor1.text(strValue);
                    // } else {
                    //     //计算剩余字数
                    //     var result = limitNum - this.count('text');
                    //     pattern = '还可以输入' +  result + '字';
                    // }
                    $('#content_length').html(pattern); //输入显示
                    ////////
                }

            });
        });
    </script>
    <script type="text/javascript">
        var uploader ="{{ route('admin.goods.uploadFiles') }}";
    </script>
    <script src="{{ config('global.assets_path') }}js/jquery.validate.min.js"></script>
    <script src="{{ config('global.assets_path') }}js/messages_zh.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/layui/layui_component.js"></script>
    <script src="/js/ajax.js"></script>
    <link href="/plugins/uploadfiles/uploadifive.css" media="screen" rel="stylesheet" type="text/css">
    <script src="/plugins/uploadfiles/jquery.uploadifive.min.js"  type="text/javascript"></script>
    <script src="/plugins/uploadfiles/uploadifive2.single.js"  type="text/javascript"></script>
    <script>
        function remove(obj) {
            $(obj).parents('li').find('input').val('');
            $(obj).parents('li').find('img').attr('src','/plugins/uploadfiles/img/timg.png');
        }
    </script>
@endsection
